<template>
    <div :style="conheight">
        <Row class="query-form2">
            <i-col span="22">
                <div class="headTitle">
                    <div class="headTitleLeft">
                        <p>画像企业</p><p style="color:red">{{sumCompany}}</p>家,Ⅰ级风险<p style="color:red">{{oneRisk}}</p>家，占比
                        <p style="color:red">{{oneRisk==0?0:this.NumberDiv(oneRisk*100,sumCompany,2)}}%</p>；Ⅱ级风险<p style="color:red">{{twoRisk}}</p>家，
                        占比<p style="color:red">{{twoRisk==0?0:this.NumberDiv(twoRisk*100,sumCompany,2)}}%</p>；Ⅲ级风险<p style="color:red">{{threeRisk}}</p>家，占比
                        <p style="color:red">{{threeRisk==0?0:this.NumberDiv(threeRisk*100,sumCompany,2)}}%</p>；Ⅳ级风险<p style="color:red">{{fourRisk}}</p>家；占比
                        <p style="color:red">{{fourRisk==0?0:this.NumberDiv(fourRisk*100,sumCompany,2)}}%</p>；无风险<p style="color:red">{{(sumCompany-oneRisk-twoRisk-threeRisk-fourRisk)}}</p>家；占比
                        <p style="color:red">{{(sumCompany-oneRisk-twoRisk-threeRisk-fourRisk)==0?0:this.NumberDiv((sumCompany-oneRisk-twoRisk-threeRisk-fourRisk)*100,sumCompany,2)}}%</p>
                    </div>
                </div>
            </i-col>
            <i-col span="2">
                <div style="float: right;">
                    <Button class="ivu-btn-query"  :loading="buttonLoading" @click="exportData">导出</Button>
                </div>
            </i-col>
        </Row>
        <div style="background-color:#F5F7F9;height:20px;width:100%;"></div>
        <Row style="background-color:#F5F7F9;">
            <Col span="12" style="padding-right:10px">
                <div class="singleForm">
                    <div class="standardTitleItem">
                        <p style="line-height: 27px;font-size:18px;height:27px;color:red">▎ </p>
                        <p class="formTitle">不可控风险地图</p>
                    </div>
                    <div style="width:100%;height:100%;flex-grow: 1" ref="mapContainer"></div>
                </div>
            </Col>
            <Col span="12">
                <div class="singleForm">
                    <div class="standardTitleItem">
                        <p style="line-height: 27px;font-size:18px;height:27px;height:27px;color:red;">▎ </p>
                        <p class="formTitle">画像标准个数</p>
                    </div>
                    <div style="width:100%;height:100%;flex-grow: 1" ref="standardNumContainer"></div>
                </div>
            </Col>
        </Row>
        <div style="background-color:#F5F7F9;height:20px;width:100%;"></div>
        <Row>
            <Col span="12"  style="padding-right:10px">
                <div class="singleForm">
                    <div class="standardTitleItem">
                        <p style="line-height: 27px;font-size:18px;height:27px;color:red">▎ </p>
                        <p class="formTitle">各二级集团风险分布</p>
                    </div>
                    <div style="width:100%;height:100%;flex-grow: 1" ref="twoLevelContainer"></div>
                </div>
            </Col>
            <Col span="12" >
                <div class="singleForm">
                    <div class="standardTitleItem">
                        <p style="line-height: 27px;font-size:18px;height:27px;color:red">▎ </p>
                        <p class="formTitle">各二级集团一级风险与共计家数</p>
                    </div>
                    <div style="width:100%;height:100%;flex-grow: 1" ref="oneRiskAndCompanyNumContainer"></div>
                </div>
            </Col>
        </Row>
        <div style="background-color:#F5F7F9;height:20px;width:100%;"></div>
        <Table  ref='table' width="100%"  @on-row-dblclick="tableClicked" :row-class-name="rowClassName"
                border  :columns="sampleColumns" :data="companyRisks"></Table>

        <Modal title="不可控风险详情" :transfer=false v-model="mapContainerDetailVisible"
               :width=1200 footer-hide>
            <Table ref='table' :loading="detailLoading"  size="small" :height=500 no-data-text="没有查询到相关数据!"
                   highlight-row stripe border :columns="columns" width="100%" :data="detailInfos">
            </Table>
        </Modal>

        <Modal title="控制因子详情" :transfer=false v-model="pollutionDetailVisible"
               :width=1200 footer-hide>
            <Table ref='table' :loading="pollutionDetailLoading"  size="small" :height=500 no-data-text="没有查询到相关数据!"
                   highlight-row stripe border :columns="columns1" width="100%" :data="pollutionDetailInfos">
            </Table>
        </Modal>

        <Modal title="最新修改详情" :transfer=false v-model="changeDetailVisible"
               :width=1200 footer-hide>
            <Spin style="margin-left:45%;margin-top:200px" size="large" v-if="queryLoading"></Spin>
            <div v-else  style="height:500px;overflow-y:auto">
            <div v-for="(item,index) in changeDetails" class="standardDiv"  @click="selectStandard(index)">
                <div style="background-color:rgb(243, 244, 248);height:5px;width:100%;"></div>
                <div class="standardTitle" style="cursor:pointer;"  >
                    <div class="standardTitleItem" style="flex-grow: 1" @click="clickInvovle(index)">
                        <p style="color:red">▎ </p>
                        <p>{{item.title}}</p>
                    </div>
                    <div class="standardTitleItem">
                        <RadioGroup style="font-size:20px" disabled  v-model="item.isinvovle">
                            <Radio disabled  label="1">
                                <span >涉及</span>
                            </Radio>
                            <Radio disabled label="0">
                                <span>不涉及</span>
                            </Radio>
                        </RadioGroup>
                        <span style="line-height: 30px;cursor:pointer;" @click="clickInvovle(index)" v-if="item.isExpand == '0'">∧</span>
                        <span  style="line-height: 30px;cursor:pointer;" @click="clickInvovle(index)" v-else>∨</span>
                    </div>
                </div>
                <Table class="tableClass"  :loading="item.loading" @on-row-click="detailClicked"
                       highlight-row stripe border v-if="item.isExpand == '1'" :columns="detailColumns" :data="item.details"></Table>
            </div>
            </div>
        </Modal>

    </div>

</template>
<script>
    import echarts from 'echarts'
    import {sessionStorage} from '@/common/cacheUtils.js';
    let cascaderDom = () => import('@/components/cascader-dom.vue');;
    import {Api} from '../../../api/index.js'

    export default {
        name: "statistics",
        data() {
            return {
                changeDetailVisible:false,
                queryLoading:false,
                height:400,
                detailIndex:0,
                changeDetails:[],
                mapContainerDetailVisible:false,
                sumCompany:0,
                oneRisk:0,
                twoRisk:0,
                threeRisk:0,
                fourRisk:0,
                detailLoading:false,
                detailInfos:[],
                twoLevelOrgs:[],
                bodyHeight:0,
                conheight:{
                    backgroundColor:'#F5F7F9',
                    display:'flex',
                    flexDirection:'column'
                },
                pagedata: {
                    total: 0, //总条数
                    fromPage: 1,//从n条开始
                    pageSize: 10//每页多少条
                },
                gongxuContainer:null,
                oneRiskAndCompanyNumContainer:null,
                twoLevelContainer:null,
                standardNumContainer:null,
                mCharts:null,
                mChartOption:null,
                buttonLoading: false,
                codingList1: [],
                codingList2: [],
                codingList3: [],
                currentStandardIndex: 0,
                twoLevelOrgList:[],
                managementElementsMap:{},
                managementElementsIdMap:{},
                pollutionFactorMap:{},
                pollutionFactorIdMap:{},
                riskLevelMap:{},
                riskLevelIdMap:{},
                userInfo: sessionStorage('userId').getObject('userId'),
                companyRisks:[],
                pollutionDetailVisible:false,
                pollutionDetailInfos:[],
                pollutionDetailLoading:false,
                columns1:[
                    {
                        type: 'index',
                        title: '编号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        title: '管理要素',
                        align: 'center',
                        key: 'managementElements',
                        minWidth: 120,
                        render:(h,params)=>{
                            let value = '';
                            this.codingList1.forEach(i =>{
                                if(i.codingCodeId == params.row.managementElements) value = i.codingName;
                            })
                            return h('div',[
                                h('span',value || '--')
                            ]);
                        }
                    },
                    {
                        title: '是/否涉及此管理要素',
                        align: 'center',
                        key: 'involveManagementElements',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.involveManagementElements == '1'?'是':params.row.involveManagementElements == '0'?'否':'')
                            ]);
                        }
                    },
                    {
                        title: '控制因子',
                        align: 'center',
                        key: 'pollutionFactor',
                        minWidth: 120,
                        render:(h,params)=>{
                            let value = '';
                            this.codingList2.forEach(i =>{
                                if(i.codingCodeId == params.row.pollutionFactor) value = i.codingName;
                            })
                            return h('div',[
                                h('span',value || '--')
                            ]);
                        }
                    },
                    {
                        title: '是/否涉及此控制因子',
                        align: 'center',
                        slot: 'involvePollutionFactor',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.involvePollutionFactor == '1'?'是':params.row.involvePollutionFactor == '0'?'否':'')
                            ]);
                        }
                    },
                    {
                        title: '法律责任',
                        align: 'center',
                        key: 'legalResponsibility',
                        tooltip: true,
                        minWidth: 120,
                    },
                    {
                        title: '法律法规依据',
                        align: 'center',
                        key: 'lawsRegulations',
                        tooltip: true,
                        minWidth: 120
                    },
                    {
                        title: '风险等级',
                        align: 'center',
                        key: 'riskLevel',
                        minWidth: 120,
                        render:(h,params)=>{
                            let value = '';
                            this.codingList3.forEach(i =>{
                                if(i.codingCodeId == params.row.riskLevel) value = i.codingName;
                            })
                            return h('div',[
                                h('span',value || '--')
                            ]);
                        }
                    },
                    {
                        title: '是/否涉及此项要求',
                        align: 'center',
                        slot: 'involveDetail',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.involveDetail == '1'?'是':params.row.involveDetail == '0'?'否':'')
                            ]);
                        }
                    },
                    {
                        title: '是/否存在问题',
                        align: 'center',
                        slot: 'isExistingProblem',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.isExistingProblem == '1'?'是':params.row.isExistingProblem == '0'?'否':'')
                            ]);
                        }
                    },
                    {
                        title: '控制因子风险定级',
                        align: 'center',
                        key: 'pollutionFactorLevel',
                        minWidth: 120,
                        render:(h,params)=>{
                            if (params.row.isExistingProblem == "1") {
                                let value = '';
                                this.codingList3.forEach(i => {
                                    if (i.codingCodeId == params.row.riskLevel) value = i.codingName;
                                })
                                return h('div', [
                                    h('span', value || '--')
                                ]);
                            }
                            else{
                                return h('div', [
                                    h('span', '无风险')
                                ]);
                            }
                        }
                    },
                    {
                        title: '管理要素风险定级',
                        align: 'center',
                        key: 'managementElementsLevel',
                        minWidth: 120,
                        render:(h,params)=>{
                            if (params.row.isExistingProblem == "1") {
                                let value = '';
                                this.codingList3.forEach(i =>{
                                    if(i.codingCodeId == params.row.riskLevel) value = i.codingName;
                                })
                                return h('div',[
                                    h('span',value || '--')
                                ]);
                            }
                            else{
                                return h('div', [
                                    h('span', '无风险')
                                ]);
                            }
                        }
                    },
                    {
                        title: '风险是否可控',
                        align: 'center',
                        slot: 'isControllableRisk',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.isControllableRisk == '1'?'是':params.row.isControllableRisk == '0'?'否':'')
                            ]);
                        }
                    },
                    {
                        title: '风险控制措施',
                        align: 'center',
                        key: 'riskControlMeasure',
                        minWidth: 200,
                    },
                    {
                        title: '风险量刑预判',
                        align: 'center',
                        key: 'riskJudgement',
                        minWidth: 200,
                    },
                    {
                        title: '问题描述',
                        align: 'center',
                        key: 'problemDesc',
                        minWidth: 200,
                    },
                    {
                        title: '问题原因',
                        align: 'center',
                        key: 'problemReason',
                        minWidth: 200,
                    },
                    {
                        title: '是/否存在行政处罚',
                        align: 'center',
                        key: 'isAdministrativePunishment',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.isAdministrativePunishment == '1'?'是':params.row.isAdministrativePunishment == '0'?'否':'')
                            ]);
                        }
                    },
                    {
                        title: '行政处罚记录（时间、下达处罚政府部门、金额）',
                        align: 'center',
                        key: 'administrativePunishmentRecord',
                        minWidth: 200,
                    }
                ],
                detailColumns:[
                    {
                        type: 'index',
                        title: '编号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        title: '管理要素',
                        align: 'center',
                        key: 'managementElements',
                        minWidth: 120,
                        render:(h,params)=>{
                            let value = '';
                            this.codingList1.forEach(i =>{
                                if(i.codingCodeId == params.row.managementElements) value = i.codingName;
                            })
                            return h('div',[
                                h('span',value || '--')
                            ]);
                        }
                    },
                    {
                        title: '控制因子',
                        align: 'center',
                        key: 'pollutionFactor',
                        minWidth: 120,
                        render:(h,params)=>{
                            let value = '';
                            this.codingList2.forEach(i =>{
                                if(i.codingCodeId == params.row.pollutionFactor) value = i.codingName;
                            })
                            return h('div',[
                                h('span',value || '--')
                            ]);
                        }
                    },
                    {
                        title: '风险等级',
                        align: 'center',
                        slot: 'riskLevel',
                        minWidth: 120,
                        render:(h,params)=>{
                            let value = '';
                            this.codingList3.forEach(i =>{
                                if(i.codingCodeId == params.row.riskLevel) value = i.codingName;
                            })
                            return h('div',[
                                h('span',value || '无风险')
                            ]);
                        }
                    },
                ],
                sampleColumns:[
                    {
                        type: 'index',
                        title: '编号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        title: '公司',
                        align: 'center',
                        key: 'companyName',
                        minWidth:150,
                    },
                    {
                        title: '最近更新时间',
                        align: 'center',
                        key: 'updateTime',
                        minWidth:150,
                        render: (h, params) => {
                            return h('div', [
                                (this.formatDate(new Date(params.row.updateTime), 'yyyy-MM-dd'))
                            ]);
                        }
                    },
                    {
                        title: 'Ⅰ级风险',
                        align: 'center',
                        key: 'riskLevel1',
                        minWidth: 120
                    },
                    {
                        title: 'Ⅱ级风险',
                        align: 'center',
                        key: 'riskLevel2',
                        minWidth: 120
                    },
                    {
                        title: 'Ⅲ级风险',
                        align: 'center',
                        key: 'riskLevel3',
                        minWidth: 120
                    },
                    {
                        title: 'Ⅳ级风险',
                        align: 'center',
                        key: 'riskLevel4',
                        minWidth: 120
                    },
                    {
                        minWidth: 100,
                        title: '操作',
                        align: "center",
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.viewChange(params.index)
                                        }
                                    }
                                }, '更新详情'),
                            ]);
                        }
                    }
                ],
                columns:[
                    {
                        type: 'index',
                        title: '编号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        title: '公司名称',
                        align: 'center',
                        key: 'companyName',
                        minWidth: 120
                    },
                    {
                        title: '管理要素',
                        align: 'center',
                        key: 'managementElements',
                        minWidth: 120,
                        render:(h,params)=>{
                            let value = '';
                            this.codingList1.forEach(i =>{
                                if(i.codingCodeId == params.row.managementElements) value = i.codingName;
                            })
                            return h('div',[
                                h('span',value || '--')
                            ]);
                        }
                    },
                    {
                        title: '控制因子',
                        align: 'center',
                        key: 'pollutionFactor',
                        minWidth: 120,
                        render:(h,params)=>{
                            let value = '';
                            this.codingList2.forEach(i =>{
                                if(i.codingCodeId == params.row.pollutionFactor) value = i.codingName;
                            })
                            return h('div',[
                                h('span',value || '--')
                            ]);
                        }
                    },
                    {
                        title: '法律责任',
                        align: 'center',
                        key: 'legalResponsibility',
                        tooltip: true,
                        minWidth: 120,
                    },
                    {
                        title: '法律法规依据',
                        align: 'center',
                        key: 'lawsRegulations',
                        tooltip: true,
                        minWidth: 120
                    },
                    {
                        title: '风险等级',
                        align: 'center',
                        key: 'riskLevel',
                        minWidth: 120,
                        render:(h,params)=>{
                            let value = '';
                            this.codingList3.forEach(i =>{
                                if(i.codingCodeId == params.row.riskLevel) value = i.codingName;
                            })
                            return h('div',[
                                h('span',value || '--')
                            ]);
                        }
                    },
                    {
                        title: '风险控制措施',
                        align: 'center',
                        key: 'riskControlMeasure',
                        minWidth: 200,
                    },
                    {
                        title: '风险量刑预判',
                        align: 'center',
                        key: 'riskJudgement',
                        minWidth: 200,
                    },
                    {
                        title: '问题描述',
                        align: 'center',
                        key: 'problemDesc',
                        minWidth: 200,
                    },
                    {
                        title: '问题原因',
                        align: 'center',
                        key: 'problemReason',
                        minWidth: 200,
                    },
                    {
                        title: '是/否存在行政处罚',
                        align: 'center',
                        key: 'isAdministrativePunishment',
                        minWidth: 120,
                        render:(h,params)=>{
                            let value = '';
                            if(params.row.isAdministrativePunishment == "0")
                                value = "否"
                            else
                                value = "是";
                            return h('div',[
                                h('span',value || '--')
                            ]);
                        }
                    },
                    {
                        title: '行政处罚记录（时间、下达处罚政府部门、金额）',
                        align: 'center',
                        key: 'administrativePunishmentRecord',
                        minWidth: 200,
                    }
                ],
                ruleCustom : {
                    opinion: [{
                        validator: (rule, value, callback) => {
                            if (this.showdata.opinion == null || this.showdata.opinion == '' || this.showdata.opinion == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change, blur'
                    }],
                    route: [
                        {required: true, message: '  ', trigger: 'blur'}
                    ],
                },
                rules: {
                    involveManagementElements: [
                        {required: true, validator: '管理要素必填'}
                    ],
                    involvePollutionFactor: [
                        {required: true, message: '控制因子必填'}
                    ],
                    involveDetail: [
                        {required: true, validator: '是否涉及此项要求必填'}
                    ],
                    isExistingProblem: [
                        {required: true, validator: '是否存在问题必填'}
                    ],
                    isControllableRisk: [
                        {required: true, validator: '风险是否可控必填'}
                    ],
                    riskControlMeasure: [
                        {required: true, validator: '风险控制措施必填'}
                    ],
                    riskJudgement: [
                        {required: true, validator: '风险量刑预判必填'}
                    ],
                    problemDesc: [
                        {required: true, validator: '问题描述必填'}
                    ],
                    isAdministrativePunishment: [
                        {required: true, validator: '是否存在行政处罚必填'}
                    ],
                    administrativePunishmentRecord: [
                        {required: true, validator: '行政处罚记录必填'}
                    ],
                }
            }
        },
        mounted(){
//            this.conheight.height=window.innerHeight-120+'px';
            this.queryCodingSort();
            this.queryTwoOrgInfo();
            this.taskInfo = this.$route.query;
            this.initMap();
            this.loadStandardNum();
            this.loadOneRiskAndCompanyNum();
            this.loadTwoLevelNum();
            this.queryEcoPortraitFormByCompamyMultLevel();
        },
        methods:{
            rowClassName (row, index) {
                var date = new Date();
                var date2 = new Date(row.updateTime);
                if(date.getFullYear() != date2.getFullYear())
                    return 'demo-table-error-row';
                else if(date.getMonth() - date2.getMonth() > 1)
                    return 'demo-table-error-row';
                else if (date.getDay() >= 25 && date.getMonth() != date2.getMonth()) {
                    return 'demo-table-error-row';
                }
                return '';
            },
            async queryCodingSort(){
                await this.$http.get(Api.queryCodeDetailBySortId + '/eco-00001', {params: {}}).then((res) => {
                    this.codingList1 = res.data.data;
                    this.codingList1.forEach(item=>{
                        this.managementElementsMap[item.codingName] = item.codingCodeId;
                        this.managementElementsIdMap[item.codingCodeId] = item.codingName;
                    })
                });
                await this.$http.get(Api.queryCodeDetailBySortId + '/eco-00002', {params: {}}).then((res) => {
                    this.codingList2 = res.data.data;
                    this.codingList2.forEach(item=>{
                        this.pollutionFactorMap[item.codingName] = item.codingCodeId;
                        this.pollutionFactorIdMap[item.codingCodeId] = item.codingName;
                    })
                });
                await this.$http.get(Api.queryCodeDetailBySortId + '/eco-00003', {params: {}}).then((res) => {
                    this.codingList3 = res.data.data;
                    this.codingList3.forEach(item=>{
                        this.riskLevelMap[item.codingName] = item.codingCodeId;
                        this.riskLevelIdMap[item.codingCodeId] = item.codingName;
                    })
                });
                this.$http.get(Api.twoPlusFourReceipt + '/twoLevelOrg').then((res) => {
                    if(res.data.status == 200){
                        this.twoLevelOrgList = res.data.data;
                    }
                })
            },
            pageSizeChange(size) {
                this.pagedata.pageSize = size
                this.pagedata.fromPage = 1
                this.query()
            },
            pageChange(pagenum) {
                this.pagedata.fromPage = pagenum
                this.query()
            },
            queryTwoOrgInfo() {
                this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
                    this.twoLevelOrgs = res.data.data
                }).catch(e => {
                })
            },
            initMap(){
                this.mCharts = echarts.init(this.$refs.mapContainer);
                this.$http.get('./json/china.json').then((res) => {
                    echarts.registerMap('chinaMap',res.data)
                    this.mChartOption = {
                        tooltip: {
                            show: true,
                            formatter: function(datas) {
                                if(datas.data != undefined)
                                    return "不可控风险个数： " +datas.data.detail.value ;
                                else
                                    return "";
                            }
                        },
                        geo: {
                            type: 'map',
                            aspectScale: 1.2, //长宽比
                            map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
                            roam: true, // 设置允许缩放以及拖动的效果
                            label: {
                                show: false  //展示标签
                            },
                            zoom: 1.7, //设置初始化的缩放比例,
                            layoutCenter: ['48%', '75%'],//距离左右，上下距离的百分比
                            layoutSize:'120%',//map百分比大小
                            itemStyle: {
                                normal:{ //静态的时候显示的默认样式
                                    areaColor:"#D9EAFD",//地图颜色
                                    borderColor:"#FFFFFF" //地图的各区域间分界线的 及地图边缘 的颜色
                                },
                                emphasis:{
                                    areaColor:"#1999FF" //鼠标悬停时区域变成的颜色
                                }
                            }
                        },
                        series: [
                            {
                                data: [],
                                geoIndex: 0,  //将空气质量的数据和第0个geo配置关联在一起
                                type:'map',
                                itemStyle: {
                                    normal:{
                                        color:"#F9A23E", //地图各地区的点和文字的颜色
                                        shadowBlur:2,
                                        shadowColor:"#FBD784" //地图各地区的点的阴影颜色
                                    }
                                }
                            },
                            {
                                data: [],
                                type: 'effectScatter',
                                coordinateSystem:'geo', //指明散点使用的坐标系统  geo的坐标系统
                                rippleEffect:{
                                    scale: 1
                                },
                                itemStyle: {
                                    normal:{
                                        color:"#F9A23E", //地图各地区的点和文字的颜色
                                        shadowBlur:1,
                                        shadowColor:"#FBD784" //地图各地区的点的阴影颜色
                                    }
                                }
                            }
                        ]
                    }
                    this.mCharts.setOption(this.mChartOption)
                    this.$http.get(Api.queryEcoPortraitFormByMap + "?companyId="
                        + this.userInfo.companyId).then(res1 => {
                        let dataList = [];
                        /*获取地图中已有的省、直辖市和特别行政区*/
                        echarts.getMap("chinaMap").geoJson.features.forEach((item) => {
                            dataList.push({
                                // 地区名称
                                name: item.properties.name,
                                // 地区经纬度
                                value: item.properties.center,
                            });
                        });
                        res1.data.data.forEach(item=>{
                            dataList.forEach(item1=>{
                                if(item1.name == item.name){
                                    item1.detail = item;
                                    this.mChartOption.series[1].data.push(item1);
                                }
                            })
                        })
                        this.mCharts.setOption(this.mChartOption)
                        this.mCharts.on('click','series.effectScatter', params => {
                            this.detailLoading = true;
                            this.mapContainerDetailVisible = true;
                            this.$http.get(Api.queryEcoPortraitFormByMap + "/detail?name="+params.data.name).then(res1 => {
                                if(res1.data.status == 200)
                                    this.detailInfos = res1.data.data;
                                this.detailLoading = false;
                            }).catch(e=>{
                                this.$Message.error('请求失败');
                            })
                        })
                        })
                    }).catch(e => {
                    })
            },
            tableClicked(row,index){
                let data = {
                    companyId:row.companyId,
                    companyName:row.companyName
                }
                this.$router.push({path: "/ecoPortraitFormDisplay", query: data});
            },
            detailClicked(row,index){
                this.pollutionDetailVisible = true;
                this.pollutionDetailLoading = true;
                this.$http.get(Api.queryEcoPortraitFormByTableDetail + "/" + row.submitId+"?pollutionFactor="+row.pollutionFactor
                  + "&managementElements=" + row.managementElements).then((res) => {
                    if(res.data.status == 200) {
                        this.pollutionDetailInfos = res.data.data;
                        this.pollutionDetailLoading = false;
                    }
                    this.detailLoading = false;
                }).catch(e => {
                  this.detailLoading = false;
                  this.$Message.error('请求失败');
                });
            },
            loadStandardNum(){
                let _this=this;
                _this.$http.get(Api.queryEcoPortraitFormByStandardNum + "?companyId="
                    + this.userInfo.companyId).then((res) => {
                    if(res.data.status == 200){
                        _this.standardNumContainer = echarts.init(_this.$refs.standardNumContainer);
                        let option = this.getStandardNumOption();
                        option.series[0].data = res.data.data;
                        _this.standardNumContainer.setOption(option);
                        _this.standardNumContainer.on("click", riskDetails);
                        function riskDetails(param) {
                            event.stopPropagation() // 阻止冒泡
                            // _this.riskLevelType = param.name
                            //_this.pagedata.fromPage=1
                            //_this.pagedata.pageSize=10
                            //   _this.toViewRisk(param.name)
                        }
                    }
                });
            },
            loadTwoLevelNum() {
                let _this = this;
                _this.$http.get(Api.queryEcoPortraitFormByTwoLevel  + "?companyId="
                    + this.userInfo.companyId).then((res) => {
                    if (res.data.status == 200) {
                        _this.twoLevelContainer = echarts.init(_this.$refs.twoLevelContainer);
                        let option = this.getTwoLevelOption();
                        option.xAxis[0].data = res.data.data.xAxis;
                        option.series = res.data.data.series;
                        _this.twoLevelContainer.setOption(option);
                        _this.twoLevelContainer.on("click", riskDetails);
                        function riskDetails(param) {
                            event.stopPropagation() // 阻止冒泡
                            // _this.riskLevelType = param.name
                            //_this.pagedata.fromPage=1
                            //_this.pagedata.pageSize=10
                            //   _this.toViewRisk(param.name)
                        }
                    }
                });
            },
            loadOneRiskAndCompanyNum(){
                let _this=this;
                _this.$http.get(Api.queryEcoPortraitFormByOneRiskAndCompanyNum  + "?companyId="
                    + _this.userInfo.companyId).then((res) => {
                    if(res.data.status == 200){
                        _this.oneRiskAndCompanyNumContainer = echarts.init(_this.$refs.oneRiskAndCompanyNumContainer);
                        let option = this.getOneRiskAndCompanyNumOption();
                        option.xAxis[0].data = res.data.data.xAxis;
                        option.series[0].data = res.data.data.series[0].data;
                        option.series[1].data = res.data.data.series[1].data;
                        _this.oneRiskAndCompanyNumContainer.setOption(option);
                        _this.oneRiskAndCompanyNumContainer.on("click", riskDetails);
                        function riskDetails(param) {
                            console.log(param);
                            event.stopPropagation() // 阻止冒泡
                            // _this.riskLevelType = param.name
                            //_this.pagedata.fromPage=1
                            //_this.pagedata.pageSize=10
                            //   _this.toViewRisk(param.name)
                        }
                    }
                });
            },
            queryEcoPortraitFormByCompamyMultLevel(){
                this.$http.get(Api.queryEcoPortraitFormByCompamyMultLevel + "?companyId="
                + this.userInfo.companyId).then((res) => {
                    if(res.data.status == 200) {
                        this.companyRisks = res.data.data.data;
                        this.companyRisks.forEach(item=>{
                            this.sumCompany += 1;
                            if(item.riskLevel1 != 0)
                                this.oneRisk += 1;
                            else if(item.riskLevel2 != 0)
                                this.twoRisk += 1;
                            else if(item.riskLevel3 != 0)
                                this.threeRisk += 1;
                            else if(item.riskLevel4 != 0)
                                this.fourRisk += 1;
                        })
                    }
                }).catch(e => {
                    this.$Message.error('请求失败');
                });
            },
            approvalSubmit(){
                let data = {
                    createUserId : this.userInfo.userId,
                    userName : this.userInfo.userName,
                    opinion : this.showdata.opinion,
                    taskId : this.taskInfo.taskId,
                    procinstId :this.taskInfo.procinstId,
                    route : this.showdata.route,
                    workId: this.taskInfo.workId,
                    formKey : 'ecoPortraitSubmitForApproval'
                };
                this.$http.get(Api.taskComplete, {params: data}).then((res) => {
                    if(res.data.status=='200'){
                        this.$Message.success("审批成功");
                        this.returnTo();
                    }else{
                        this.buttonLoading = false;
                        this.$Message.success("审批失败")
                    }
                }).catch(e => {
                    this.buttonLoading = false;
                    this.$Message.error("数据获取失败")
                })
            },
            changeResult(result){
                if(result == '1'){
                    this.showdata.opinion = "同意";
                }
                else{
                    this.showdata.opinion = "";
                }
            },
            returnTo(){
                if(this.$route.query.close == true)
                    window.close();
                else
                    this.$router.go(-1);
            },
            exportData(){
                this.buttonLoading = true;
                this.$http.get(Api.exportStandardFormCompany  + "?companyId="
                    + this.userInfo.companyId, {
                    responseType: 'arraybuffer'      //告诉服务器我们需要的响应格式
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: "application/vnd.ms-excel"
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = "环保画像统计数据.xlsx" //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                    this.buttonLoading = false;
                }).catch(e => {
                    this.buttonLoading = false;
                    this.$Message.error("导出失败")
                })
            },
            getLinearColor(color1, color2, pos) {
                const p = Object.assign({ x: 0.5, y: 0, x2: 0.5, y2: 1 }, pos)
                return {
                    type: 'linear',
                    ...p,
                    colorStops: [
                        {
                            offset: 0,
                            color: color1
                        },
                        {
                            offset: 1,
                            color: color2
                        }
                    ],
                    global: false
                }
            },
            getStandardNumOption(){
                let option = {
                    tooltip: {
                        trigger: 'item',
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    legend: {
                        orient:'vertical',
                        top:'top',
                        left:'right',
                        type:'scroll',
/*                        formatter: function(params) {
                            var newParamsName = "";
                            var paramsNameNumber = params.length;
                            var provideNumber = 5; //一行显示几个字
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                            if (paramsNameNumber > provideNumber) {
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";
                                    var start = p * provideNumber;
                                    var end = start + provideNumber;
                                    if (p == rowNumber - 1) {
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {
                                        tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;
                                }
                            } else {
                                newParamsName = params;
                            }
                            return newParamsName;
                        },  */
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            center:['30%','50%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                normal: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2,
                                    color: function (colors) {
                                        var colorList = [
                                            '#1999FF',
                                            '#786AFF',
                                            '#F9A23E',
                                            '#B99EFF',
                                            '#F45454 ',
                                            '#82CDFF',
                                            '#FBD784',
                                            '#f05b72',
                                            '#d71345 ',
                                            '#a3cf62',
                                            '#1d953f',
                                        ];
                                        return colorList[colors.dataIndex];
                                    }
                                }
                            },
                            label: {
                                show: false
                            },
                            emphasis: {
                                label: {
                                    show: false,
                                    fontSize: '12',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                            ]
                        }
                    ]
                };
                return option;
            },
            getTwoLevelOption(){
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        textStyle: {
                            fontSize: 12
                        },
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['Ⅰ级', 'Ⅱ级', 'Ⅲ级', 'Ⅳ级'],
                        left:'center',
                        top:'bottom'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: [],
                            axisLabel: {
                                //x轴文字的配置
                                show: true,
                                interval: 0,//使x轴文字显示全
                                textStyle: {
                                    fontSize: 9,
                                    fontFamily: 'HiraginoSansGB-W3, HiraginoSansGB',
                                    color: 'rgb(51,51,51)',
                                    lineHeight: 14
                                },
                                formatter: function(params) {
                                    var newParamsName = "";
                                    var paramsNameNumber = params.length;
                                    var provideNumber = 3; //一行显示几个字
                                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                                    if (paramsNameNumber > provideNumber) {
                                        for (var p = 0; p < rowNumber; p++) {
                                            var tempStr = "";
                                            var start = p * provideNumber;
                                            var end = start + provideNumber;
                                            if (p == rowNumber - 1) {
                                                tempStr = params.substring(start, paramsNameNumber);
                                            } else {
                                                tempStr = params.substring(start, end) + "\n";
                                            }
                                            newParamsName += tempStr;
                                        }
                                    } else {
                                        newParamsName = params;
                                    }
                                    return newParamsName;
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                    ]
                };
                return option;
            },
            getOneRiskAndCompanyNumOption(){
                let option = {
                    tooltip: {
                        textStyle: {
                            fontSize: 12
                        },
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['Ⅰ级风险', '共计家数'],
                        top:'bottom',
                        left:'center',
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: [],
                            axisLabel: {
                                //x轴文字的配置
                                show: true,
                                interval: 0,//使x轴文字显示全
                                textStyle: {
                                    fontSize: 9,
                                    fontFamily: 'HiraginoSansGB-W3, HiraginoSansGB',
                                    color: 'rgb(51,51,51)',
                                    lineHeight: 14
                                },
                                formatter: function (params) {
                                    var newParamsName = "";
                                    var paramsNameNumber = params.length;
                                    var provideNumber = 3; //一行显示几个字
                                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                                    if (paramsNameNumber > provideNumber) {
                                        for (var p = 0; p < rowNumber; p++) {
                                            var tempStr = "";
                                            var start = p * provideNumber;
                                            var end = start + provideNumber;
                                            if (p == rowNumber - 1) {
                                                tempStr = params.substring(start, paramsNameNumber);
                                            } else {
                                                tempStr = params.substring(start, end) + "\n";
                                            }
                                            newParamsName += tempStr;
                                        }
                                    } else {
                                        newParamsName = params;
                                    }
                                    return newParamsName;
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [{
                        name: "Ⅰ级风险", emphasis: {focus: "series"}, type: "bar",
                        itemStyle: {
                            color: this.linear(
                                '#1999FF',
                                '#82CDFF'
                            )
                        }
                    },{
                        name: "共计家数", emphasis: {focus: "series"}, type: "bar",
                        itemStyle: {
                            color: this.linear(
                                '#F9A23E',
                                '#FBD784'
                            )
                        }
                    }
                    ]
                };
                return option;
            },
            linear(startColor, endColor) {
                // 4个方位参数依次为右、下、左、上，（0 0 0 1）代表从正上方开始
                // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                return {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: startColor // 0% 处的颜色
                    }, {
                        offset: 1, color: endColor // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }
            },
            viewChange(index){
                this.detailIndex = index;
                this.changeDetailVisible = true;
                this.queryLoading = true;
				// 添加companyid参数 后台查询详情信息，有详情直接展开
                this.$http.get(Api.queryEcoPortraitStandardSubmitSubItemData + '/'+ this.companyRisks[index].submitId+'?companyId='+this.companyRisks[index].companyId).then((res) => {
                        if (res.data.status == 200) {
                            this.queryLoading = false;
                            this.changeDetails = [];
                            res.data.data.forEach(item=>{
                                // item.details = [];
                                if(item.isinvovle == "1"){
                					let details = this.formatData(item.details)
                					var mergeCells = [];
                					for(var i = 0;i < details.length;i++){
                					    var temp = { row: i, col: 1, rowspan: details[i].mergeCol, colspan: 1 }
                					    mergeCells.push(temp);
                					    var temp1 = { row: i, col: 2, rowspan: details[i].mergeCol, colspan: 1 }
                					    mergeCells.push(temp1);
                					}
                					item.details = details
                					item.mergeCells = mergeCells
                					item.isExpand = details.length>0?'1':'0'
                                    this.changeDetails.push(item);
                                }
                            });
                        }
                    })
            },
            clickInvovle(index){
                if(this.changeDetails[index].isExpand == '1') {
                    this.changeDetails[index].loading = true;
                    this.changeDetails[index].isExpand = '0';
                }
                else {
                    this.changeDetails[index].loading = true;
                    this.changeDetails[index].isExpand = '1';
                    if(this.changeDetails[index].details.length == 0) {
                        this.$http.get(Api.queryEcoPortraitFormStandardSubmitSubItemData + '/'+ this.companyRisks[this.detailIndex].companyId + "/" + this.changeDetails[index].id
                            + "/"  +this.changeDetails[index].subitemId).then((res) => {
                            if (res.data.status == 200) {
                                res.data.data = this.formatData(res.data.data);
                                var mergeCells = [];
                                for(var i = 0;i < res.data.data.length;i++){
                                    var temp = { row: i, col: 1, rowspan: res.data.data[i].mergeCol, colspan: 1 }
                                    mergeCells.push(temp);
                                    var temp1 = { row: i, col: 2, rowspan: res.data.data[i].mergeCol, colspan: 1 }
                                    mergeCells.push(temp1);
                                }
                                this.$set(this.changeDetails[this.currentStandardIndex], 'details', res.data.data);
                                this.$set(this.changeDetails[this.currentStandardIndex], 'mergeCells', mergeCells);
                            }
                            this.changeDetails[index].loading = false;
                            this.changeDetails[index].isExpand = '1';
                        });
                    }
                    else {
                        this.changeDetails[index].loading = false;
                        this.changeDetails[index].isExpand = '1';
                    }
//                    this.$refs.plxTable[index].reloadData(this.changeDetails[index].details);
                    //                   console.log(this.changeDetails[index].details)
                }
            },
            selectStandard(index){
                this.currentStandardIndex = index;
            },
            formatDate(date, fmt) {
                if (typeof date == 'string') {
                    return date;
                }
                if (!fmt) fmt = "yyyy-MM-dd hh:mm:ss";
                if (!date || date == null) return null;
                let o = {
                    'M+': date.getMonth() + 1, // 月份
                    'd+': date.getDate(), // 日
                    'h+': date.getHours(), // 小时
                    'm+': date.getMinutes(), // 分
                    's+': date.getSeconds(), // 秒
                    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
                    'S': date.getMilliseconds() // 毫秒
                }
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
                for (let k in o) {
                    if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
                }
                return fmt
            },
            formatData(data) {
                let names = [];
                //筛选出不重复的 name值,将其放到 names数组中
                data.forEach((e) => {
                    if (!names.includes(e.managementElements)) {
                        names.push(e.managementElements);
                    }
                });
                let nameNums = [];
                //将names数组中的 name值设置默认合并0个单元格,放到 nameNums中
                names.forEach((e) => {
                    nameNums.push({ managementElements: e, num: 0 });
                });
                //计算每种 name值所在行需要合并的单元格数
                data.forEach((e) => {
                    nameNums.forEach((n) => {
                        if (e.managementElements === n.managementElements) {
                            n.num++;
                        }
                    });
                });
                //将计算后的合并单元格数整合到 data中
                data.forEach((e) => {
                    nameNums.forEach((n) => {
                        if (e.managementElements === n.managementElements) {
                            if (names.includes(e.managementElements)) {
                                e.mergeCol = n.num;
                                //删除已经设置过的值(防止被合并的单元格进到这个 if 语句中)
                                names.splice(names.indexOf(n.managementElements), 1);
                            } else {
                                //被合并的单元格设置为 0
                                e.mergeCol = 0;
                            }
                        }
                    });
                });
                //将整理后的数据交给表格渲染
                return data;
            },
        }
    }

</script>

<style>
    @import '../../../index.css';

    .ivu-card-bordered{
        border:none;
    }

    .headTitle{
        width:100%;
        display:flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
        background-color:white;
        padding-top:10px;
        padding-bottom:10px;
    }

    .headTitleLeft{
        margin-bottom:10px;
        display:flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-around;
    }

    .headTitleItem{
        display: flex;
        align-items: center;
        flex:auto;
        justify-content: center;
    }

    .standardDiv{
        display:flex;
        flex-direction: column;
        width:100%;
    }

    .standardTitle{
        display:flex;
        flex-direction: row;
        width:100%;
        justify-content:space-between;
        align-items: center;
    }

    .standardTitleItem{
        display:flex;
        flex-direction: row;
        justify-content: left;
        margin-right:20px;
    }


    .singleForm{
        width:100%;
        height:300px;
        background-color:white;
        padding: 10px;
        display:flex;
        flex-direction: column;
    }

    .formTitle{
        font-size: 18px;
        font-family: HiraginoSansGB-W3, HiraginoSansGB;
        font-weight: normal;
        color: #333333;
        line-height: 27px;
        flex-grow:1;
    }

    .ivu-table .demo-table-error-row td{
        /* background-color: red; */
        /* color: #fff; */
    }
</style>